<template>
  <div class="add-eval" style="padding: 10px 10px;height: 87.5vh">
    <div class="title">
      <p>
        <span class="color999">订单号：</span><span>{{ orderSn }}</span>
        <span class="color999 ml_20" v-if="order.order">{{ order.payTime }}</span>
      </p>
    </div>
    <!-- 物流评分、服务评分 -->
    <div class="delivery-rate">
      <div class="color999">
        <a-space>
          <span>综合评价：<a-rate v-model:value="form.ceScore" @change="calcGrade"
                                 allow-half /></span>
        </a-space>
        <span v-if="form.grade == 1" class="grade">好评</span>
        <span v-else-if="form.grade == 2" class="grade">中评</span>
        <span v-else-if="form.grade == 3" class="grade">差评</span>
      </div>
    </div>
    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
    <ul class="goods-eval">
      <li>
        <div class="goods-con">
          <img :src="getFileAccessHttpUrl(orderGoods.goodsImage)" class="hover-pointer" alt=""
               width="100"
               @click="goGoodsDetail(orderGoods.goodsId)">
          <p style="margin-top: 20px" class="hover-pointer color999"
             @click="goGoodsDetail(orderGoods.goodsId)">
            {{ orderGoods.goodsName }}</p>
          <p style="color: red">{{ unitPrice(orderGoods.purchasePrice, "￥", "") }}</p>
        </div>

        <div class="eval-con">
          <a-textarea v-model:value="form.content" :rows="5" :maxlength="500" show-word-limit
                      placeholder="评价内容描述" />
          <div style="margin-top: 20px">
            <a-upload
              v-model:file-list="fileList"
              :action="uploadUrl"
              :headers="headers"
              list-type="picture-card"
              @change="handleChange"
              accept="image/*"
            >
              <div v-if="fileList.length < 5">
                <plus-outlined />
                <div style="margin-top: 8px">上传图片</div>
              </div>
            </a-upload>
          </div>
        </div>
      </li>
    </ul>
    <a-button type="primary" class="mt_10" :loading="loading" @click="save">发表</a-button>
  </div>
</template>
<script lang="ts" setup>
import { addEvaluation, orderDetail } from "@/api/order";
import { onMounted, reactive, ref } from "vue";
import { unitPrice } from "@/utils";
import { useRoute, useRouter } from "vue-router";
import { useMessage } from "@/hooks/web/useMessage";
import { PlusOutlined } from "@ant-design/icons-vue";
import { uploadUrl } from "@/api/common/api";
import { getFileAccessHttpUrl, getHeaders } from "@/utils/compUtils";

const headers = getHeaders();

const router = useRouter();
const fileList = ref<any>([]);
const { createMessage } = useMessage();

const route = useRoute();
const orderSn: any = route.params?.orderSn;
const orderGoodsId: any = route.params?.orderGoodsId;

const order: any = ref({}); // 订单详情
const orderGoods: any = ref({}); // 订单商品
const form: any = reactive<any>({ // 评分展示
  ceScore: "",
  grade: "",
  content: ""
}); // 表单
const visible = ref<boolean>(false); // 图片预览
const loading = ref<boolean>(false); // 提交加载状态

async function getOrderDetail() { // 获取订单详情
  const res: any = await orderDetail(orderSn);
  order.value = res.result;
  orderGoods.value = res.result?.goodsList?.filter((item: any) => item.id == orderGoodsId)[0];
}

async function save() { // 保存评价
  if (!form.ceScore || form.ceScore == 0) {
    createMessage.warn("请进行综合评价");
    return;
  }
  let params = {
    orderSn: orderSn,
    orderGoodsId: orderGoodsId,
    goodsId: orderGoods.value.goodsId,
    ceScore: form.ceScore,
    grade: form.grade,
    content: form.content
  };
  if (fileList.value.length > 0) {
    const imageList = fileList.value.map((item: any) => {
      return item.url;
    });
    params["images"] = imageList.join(",");
  }
  await addEvaluation(params);
  createMessage.success("评价成功");
  await router.push("/userCenter/myOrder");
}

function goGoodsDetail(goodsId) { // 跳转商品详情
  let routerUrl = router.resolve({
    path: `/course/onlineStudy/${goodsId}`
  });
  window.open(routerUrl.href, "_blank");
}


const handleChange = (info: any) => {
  if (info.file.status !== "uploading") {
  }
  if (info.file.status === "done") {
    // 判断响应是否成功
    if (info.file.response.success == false) {
      // 消息提示
      createMessage.error(info.file.response.message);
      // 从文件list中删除文件
      fileList.value.splice(fileList.value.indexOf(info.file), 1);
      return;
    }
    info.file.url = getFileAccessHttpUrl(info.file.response.result);
  } else if (info.file.status === "error") {
  }
};

onMounted(() => {
  getOrderDetail();
});

function calcGrade() {
  if (form.ceScore >= 4) {
    form.grade = 1;
  } else if (form.ceScore >= 2 && form.ceScore < 4) {
    form.grade = 2;
  } else if (form.ceScore < 2 && form.ceScore > 0) {
    form.grade = 3;
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/style/course/global.scss";

.delivery-rate {
  margin-top: 20px;
  height: 50px;
  border-bottom: 1px solid #eee;

}

.goods-eval li {
  display: flex;
  border-bottom: 1px solid #eee;

  .goods-con {
    width: 30%;
    padding: 20px;
    text-align: center;

    p {
      word-wrap: wrap;

      &:hover {
        color: $theme_color;
      }
    }
  }

  .eval-con {
    width: 70%;
    padding: 20px;
  }
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
  margin-top: 10px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.icon-upload {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  display: inline-block;
  border: 1px dashed #999;
  border-radius: 4px;
  margin-top: 10px;

  &:hover {
    cursor: pointer;
    border-color: $theme_color;
  }
}

.grade {
  margin: 0 40px;
  color: red;
}
</style>
